<template>
  <div class="app-container">
    <div class="title">
      交易所
    </div>
    <ul class="list">
      <li>
        <div class="info">
          <div class="name">这是交易物品</div>
          <div class="price">￥10000</div>
        </div>
        <div class="bottom">
          <mt-button size="small" type="primary">购买</mt-button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'cart',
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  .title{
    font-size: 20px;
    color: #fff;
    background-color: rgb(80, 78, 78);
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  ul{
    >li{
      padding: 10px 15px;
      >div.info{
        display: flex;
        justify-content: space-between;
        .name{
          font-size: 16px;
        }
        .price{
          color: rgb(194, 18, 18);
        }
      }
      .bottom{
        border-bottom: 1px solid rgb(151, 151, 151);
        padding-bottom: 10px;
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
}
</style>
